<template>
  <div>
  <d2-container :class="{ 'page-compact': crud.pageOptions.compact }">
    <template slot="header">车辆信息</template>
    <d2-crud-x ref="d2Crud" v-bind="_crudProps" v-on="_crudListeners" @openHisLoc="openHisLoc">
      <!-- 自动绑定参数与事件 -->
      <!-- 包含详细参数见：https://gitee.com/greper/d2-crud-plus/blob/master/packages/d2-crud-plus/src/lib/mixins/crud.js#L164-->
      <div slot="header">
        <crud-search
          ref="search"
          :options="crud.searchOptions"
          @submit="handleSearch"
        />
        <el-button-group>
          <el-button size="small" type="primary" @click="addRow"
            ><i class="el-icon-plus" /> 新增</el-button
          >
        </el-button-group>
        <crud-toolbar v-bind="_crudToolbarProps" v-on="_crudToolbarListeners" />
      </div>
    </d2-crud-x>
  </d2-container>
  <el-drawer
      :title="drawerTitle"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      size="100%">
      <history-locus ref="historyLocus" v-if="historyLocusStatus" v-bind:vin="vin"></history-locus>
  </el-drawer>
  </div>
</template>

<script>
import { crudOptions } from './crud' // 上文的crudOptions配置
import { d2CrudPlus } from 'd2-crud-plus'
import HistoryLocus from './historyLocus'
import { AddObj, GetList, UpdateObj, DelObj, historyMoveStart } from './api' // 查询添加修改删除的http请求接口
export default {
  name: 'vehicle_move',
  components: { HistoryLocus },
  mixins: [d2CrudPlus.crud], // 最核心部分，继承d2CrudPlus.crud
  data() {
    return{
          // 实时 - 历史 轨迹
      drawer: false,
      direction: 'rtl',
      drawerTitle:"",
      vin:"",
      historyLocusStatus:false,
    }
  },
  methods: {
    getCrudOptions () {
      return crudOptions(this)
    },
    pageRequest (query) {
      return GetList(query)
    }, // 数据请求
    addRequest (row) {
      return AddObj(row)
    }, // 添加请求
    updateRequest (row) {
      return UpdateObj(row)
    }, // 修改请求
    delRequest (row) {
      return DelObj(row.id)
    }, // 删除请求
    openHisLoc(scope){

      
      historyMoveStart({move_id: scope.row.id, vin: scope.row.vehicle_vin}).then(response =>{
        this.vin = scope.row.vehicle_vin;
        this.drawerTitle = scope.row.vehicle_vin + "历史轨迹";
        this.drawer = true;
        this.historyLocusStatus = true;
        setTimeout(this.initHistoryLocaus,100)
      })
      
    },
    initHistoryLocaus(){
      this.$refs.historyLocus.initLocus();
    },
    handleClose(done){
      if (this.historyLocusStatus){
        this.historyLocusStatus = false;
        this.$refs.historyLocus.closeLocus();
        // historyMoveDel(this.vin)
      }
      done()
    }
  }
}
</script>
